<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>层户管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" src="../../static/js/tool.js"></script>
		<style type="text/css">
			/*
		        找到html标签、body标签，和挂载的标签
		        都给他们统一设置样式
		    */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}
		</style>
	</head>

	<body>
		<el-container id="app">
			<el-main>
				<vxe-grid border ref="xGrid" resizable show-overflow highlight-hover-row highlight-current-row
					keep-source :height="tableHeight" size="mini" :toolbar="tableToolbar"
					:edit-config="{trigger:'click', mode:'row'}" :data="tableData"
					:radio-config="{labelField: 'name', trigger: 'row'}"
					:header-cell-style="{'text-align':'center'}" @toolbar-button-click="toolbarButtonClickEvent">
					<vxe-table-column type="radio" width="50" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="room_name" title="房间号" width="100" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="buildname" title="楼栋/单元" width="120" headerAlign="center" align="center">
					</vxe-table-column>
					<!-- <vxe-table-column field="room_hx" title="户型" width="100" headerAlign="center" align="center"
						:formatter="format_houseType">
					</vxe-table-column> -->
					<vxe-table-column field="room_hx" width="100" title="户型" headerAlign="center" align="center"
						:formatter="format_houseType"></vxe-table-column>
					<vxe-table-column field="room_mj" title="面积/m²" width="100" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="area_name" title="所属小区" width="300" headerAlign="center" align="center">
					</vxe-table-column>
					</vxe-table-column>
					<vxe-table-column field="create_user" title="创建人" width="120" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="create_time" width="190" title="创建日期" headerAlign="center" align="center"
						:formatter="formatDate"></vxe-table-column>
					</vxe-table-column>
					<vxe-table-column field="update_user" title="修改人" width="120" headerAlign="center" align="center">
					</vxe-table-column>
					<vxe-table-column field="update_time" width="190" title="修改时间" headerAlign="center" align="center"
						:formatter="formatDate"></vxe-table-column>
					</vxe-table-column>
					<vxe-table-column title="操作" width="180" headerAlign="center" align="center" fixed="right"
						show-overflow>
						<template v-slot="{ row }">
							<vxe-button v-if="row.orgCode!= '01'" type="text" icon="fa fa-edit vxe-primary-color"
								@click="editEvent(row)" title="编辑房间信息"></vxe-button>
							<vxe-button v-if="row.orgCode!= '01'" type="text" icon="fa fa-trash-o vxe-danger-color"
								@click="removeEvent(row)" title="删除房间信息"></vxe-button>
						</template>
					</vxe-table-column>
				</vxe-grid>
				
				<vxe-pager style="margin-bottom: 20px;padding-top: 10px;" background :page-size.sync="pageSizeHouse"
					:current-page.sync="currentPageHouse" :total="totalSize" @page-change="handleCurrentChange"
					size="mini"
					:layouts="['Sizes','PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump','FullJump', 'Total']">
				</vxe-pager>

				<vxe-modal v-model="isShowModel" :title="isAddOrUpdate ? '新增房间信息' : '编辑房间信息' " :width="modelWith"
					:height="modelHeight" @close="clseModel" show-zoom resize>
					<template #default>
						<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="100px"
							class="demo-ruleForm" style="padding: 50px;">
							<el-form-item label="楼栋/单元" prop="buildName">
								<el-input placeholder="暂无楼栋/单元信息" v-model="formData.buildName" :disabled="disabled"
									style="width: 400px;">
								</el-input>
							</el-form-item>
							<el-form-item label="房间号" prop="roomNumber">
								<el-input placeholder="请输入房间号" v-model="formData.roomNumber" style="width: 400px;">
								</el-input>
							</el-form-item>
							<el-form-item label="房屋户型" prop="roomType">
								<el-select v-model="formData.roomType" placeholder="请选择房屋户型" style="width: 400px;">
									<el-option v-for="item in typesList" :key="item.label" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="房屋面积" prop="roomArea">
								<el-input placeholder="请输入房屋面积" v-model="formData.roomArea" style="width: 400px;">
								</el-input>
							</el-form-item>
							<el-form-item style="text-align: right;">
								<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
								<el-button @click="resetForm('ruleForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</template>
				</vxe-modal>

			</el-main>
		</el-container>
	</body>

	<script>
		window.onload = function() {
			var main = {
				data() {
					return {
						tableHeight: 500,
						// tablePage: {
						// 	perfect: true,
						// 	total: 0,
						// 	currentPage: 1,
						// 	pageSize: 15,
						// 	align: 'right',
						// 	pageSizes: [15, 30, 45, 60, 75, 90],
						// 	layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
						// 		'Total'
						// 	],
						// },
						tableToolbar: {
							buttons: [{
								code: 'addBuild',
								name: '新增房间信息',
								status: 'perfect',
								icon: 'fa fa-plus vxe-primary-color'
							}, ],
							refresh: false,
							perfect: true,
							custom: true
						},
						// tableProxy: {
						// 	props: {
						// 		result: 'data.rows',
						// 		total: 'data.total'
						// 	},
						// 	ajax: {
						// 		// 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax） page 对象： { pageSize, currentPage }
						// 		query: ({
						// 			page,
						// 			sort,
						// 			filters
						// 		}) => {
						// 			return XEAjax.post(
						// 				`${curlFinance}/room/getRoomList?currentPage=${page.currentPage}&pageSize=${page.pageSize}&buildId=` +
						// 				Tool.getParam('id'));
						// 		}
						// 	}
						// },
						isShowModel: false,
						isAddOrUpdate: 1, // 1:新增   0:编辑
						modelWith: '45%',
						modelHeight: '55%',
						formData: {
							roomNumber: null,
							buildName: null,
							roomType: null,
							roomArea: null

						},
						formRules: {
							buildName: [{
								required: true,
								message: '请选择楼栋',
								trigger: ['blur', 'change']
							}],
							roomNumber: [{
								required: true,
								message: '请输入房间号',
								trigger: ['blur', 'change']
							}],
							// roomType: [{
							// 	required: true,
							// 	message: '请选择房屋户型',
							// 	trigger: ['blur', 'change']
							// }],
							// roomArea: [{
							// 	required: true,
							// 	message: '请输入房间面积',
							// 	trigger: ['blur', 'change']
							// }],
						},
						restaurants: [],
						buildname: null,
						buildID: null,
						disabled: true,
						areaId: null,
						typesList: [],
						pageSizeHouse: 15, //每页显示的条数
						currentPageHouse: 1, //当前第几页
						totalSize: 0, //总页数
						tableData: [],
					}
				},
				created() {
					this.buildID = Tool.getParam('id')
					this.areaId = Tool.getParam('areaId')
					this.buildname = decodeURIComponent(Tool.getParam('buildname'))
					this.getRoomList()
					this.housetypes()
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 75;
				},
				methods: {
					getRoomList(){
						this.tableData = []
						XEAjax.post(`${curlFinance}/room/getRoomList?currentPage=` + this.currentPageHouse +
							'&pageSize=' + this.pageSizeHouse + '&buildId=' + this
							.buildID).then(data => {
							if (data.code == 200) {
								this.tableData = data.data.rows
								this.totalSize = data.data.total
							} else {
								this.$XModal.message({
									message: '获取数据失败',
									status: 'error'
								});
							}
						});
					},
					handleCurrentChange(e) {
						this.currentPageHouse = e.currentPage
						this.pageSizeHouse = e.pageSize
						this.getRoomList()
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'addBuild':
								this.isAddOrUpdate = 1
								this.formData.buildName = this.buildname
								this.isShowModel = true
								break;
						}
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:MM:ss')
					},
					format_houseType({
						cellValue
					}) {
						switch (cellValue) {
							case "1":
								return '公寓'
								break;
							case "2":
								return '单间'
								break;
							case "3":
								return '复式'
								break;
							case "4":
								return '一室一厅'
								break;
							case "5":
								return '两室一厅'
								break;
							case "6":
								return '三室两厅'
								break;
							case "7":
								return '四室两厅'
								break;
							case "8":
								return '两室两厅'
								break;
							case "9":
								return '一室两厅'
								break;
							default:
							return ''
								break;
						}
					},
					clseModel() {
						this.formData = {
							roomNumber: null,
							buildName: this.buildname,
							roomType: null,
							roomArea: null
						}
					},
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								this.isAddOrUpdate ? this.roomAdd() : this.roomUpdate()
							} else {
								return false;
							}
						});
					},
					resetForm(formName) {
						//this.$refs[formName].resetFields();
						this.formData.roomNumber = null
						this.formData.roomType = null
						this.formData.roomArea = null
					},
					editEvent(row) {
						this.isAddOrUpdate = 0
						this.formData.buildName = row.room_name
						this.formData = {
							roomNumber: row.room_name,
							buildName: row.buildname,
							roomID: row.room_id,
							roomType: row.room_hx,
							roomArea: row.room_mj,
						}
						this.isShowModel = true
					},
					removeEvent(row) {
						this.$XModal.confirm('确定要删除该数据？').then(type => {
							if (type == 'confirm') {
								XEAjax.post(`${curlFinance}/room/roomDelByRoomId?RoomId=` + row.room_id).then(
									res => {
										if (res.code == 200) {
											this.$message({
												message: res.msg,
												type: 'success'
											})
											this.getRoomList()
										} else {
											this.$message({
												message: res.msg,
												type: 'error'
											})
										}
									});
							}
						})
					},
					roomAdd() {
						let params = {
							areaId: this.areaId,
							buildId: this.buildID,
							roomName: this.formData.roomNumber,
							roomHx: this.formData.roomType,
							roomMj: this.formData.roomArea,
						}
						console.log(params)
						XEAjax.post(`${curlFinance}/room/roomAdd`, params).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success'
								})
								this.isShowModel = false
								this.getRoomList()
								this.formData.roomNumber = null
								this.formData.roomType = null
								this.formData.roomArea = null
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								})
							}
						});
					},
					roomUpdate() {
						let params = {
							roomName: "string",
							areaId: this.areaId,
							buildId: this.buildID,
							roomName: this.formData.roomNumber,
							roomId: this.formData.roomID,
							roomHx: this.formData.roomType,
							roomMj: this.formData.roomArea,
						}
						XEAjax.post(`${curlFinance}/room/roomUpdatePC`, params).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success'
								})
								this.isShowModel = false
								this.getRoomList()
								this.formData.roomNumber = null
								this.formData.roomType = null
								this.formData.roomArea = null
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								})
							}
						});
					},
					housetypes() {
						XEAjax.get(`${curl}/dict/getDictTreeOptions?dictCode=housetypes`).then(res => {
							if (res.code == 200) {
								let length = []
								length = res.data
								if (length < 1) {
									this.$message({
										message: '暂无字典表数据',
										type: 'warning'
									})
								} else {
									this.typesList = res.data
								}
							} else {
								this.$message({
									message: res.msg,
									type: 'warning'
								})
							}
						});
					},
				}
			};
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>
</html>
